<template>
  <div class="mapDiv">
    <div class="header">
      <div class="title1">
        <div class="title-left">
          <img src="@/assets/jindu.png" /><span>进度情况</span>
        </div>
        <div class="trangle" />
      </div>
      <div class="title-right">
        <img src="@/assets/redwarn.png" alt="" /><span>统计时间:</span
        ><span class="date">{{ value }}</span>
      </div>
    </div>
    <div ref="chart1" class="rate" />
  </div>
</template>
<script>
import Bus from "@/bus.js";
import {
  mapGetters
} from 'vuex'
export default {
    computed: {
    ...mapGetters([
      'citylist',
    ])
  },
  data() {
    return {
      value: "",
      myChart: null,
      queryCity:"湖南省",
      
      resultlist: {
        label: "长沙市",
        children: [
          { name: "天心区", value: "20" },
          { name: "岳麓区", value: "40" },
          { name: "开福区", value: "60" },
          { name: "芙蓉区", value: "90" },
        ],
      },
    };
  },
  created: function () {
    var aData = new Date();
    this.value =
      aData.getFullYear() +
      "-" +
      (aData.getMonth() + 1) +
      "-" +
      aData.getDate();
  },
  mounted() {
    this.getEchartData();
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
      Bus.$on("witchCity", data => {
        this.queryCity = data
      })
  },
  beforeDestroy() {
     Bus.$off("witchCity")
  },
  methods: {
    getEchartData() {
     
      let data1 =[];
      let data2 = [];
      this.resultlist.children.forEach(element => {
        data1.push(element.name)
        data2.push(element.value)
      });
      this.myChart = this.$echarts.init(this.$refs.chart1);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // 设置整个柱状图的上下左右的距离
        grid: {
          left: "20",
          right: "30",
          bottom: "10",
          top: "10",
          containLabel: true,
        },
        // 横坐标
        xAxis: {
          axisTick: {
            show: false,
          },
          max: 100,
          type: "value",
          splitLine: { show: true }, // 去除网格线
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#ccc", // 左边线的颜色
              width: "1", // 坐标线的宽度
            },
          },
        },
        // 纵坐标
        yAxis: {
          axisTick: {
            show: false,
          },
          type: "category",
          data: data1,
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#ccc", // 左边线的颜色
              width: "1", // 坐标线的宽度
            },
          },
        },
        // 数值
        series: [
          {
            barWidth: 15, // 柱子的宽度
            type: "bar",
            data: data2,
            itemStyle: {
              normal: {
                // 设置柱子颜色
                color: "#B0C4DE",
                // 在柱子右边显示数值
                label: {
                  show: true,
                  position: "right",
                  verticalAlign: "middle",
                  formatter: "{c}%", // 给数字添加百分号
                },
              },
            },
          },
        ],
      };

      this.myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
.mapDiv {
  position: relative;
  .header {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title1 {
      width: 35%;
      height: 100%;
      color: #fff;
      font-size: 18px;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      position: relative;
      .title-left {
        display: flex;
        background-color: #a4509d;
        height: 40px;
        width: calc(100% - 40px);
        padding: 10px;
        align-items: center;
      }
      img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
      }
      .trangle {
        float: left;
        width: 0px;
        height: 0px;
        border-left: 40px solid #a4509d;
        border-top: 40px solid #a4509d;
        border-right: 40px solid transparent;
      }
    }
    .title-right {
      display: flex;
      align-items: center;
      margin-right: 15px;
      img {
        width: 25px;
        height: 25px;
      }
      span {
        font-size: 14px;
        margin-left: 10px;
      }
    }
  }
  .rate {
    margin: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 60px);
    border: 1px dashed #a4509d;
    border-radius: 5px;
  }
}
</style>
